<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>2017.4.24 router</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
</head>
<style>
    .active {
        background: red;
    }

    li {
        width: 100px;
        height: 30px;
        line-height: 30px;
        background-color: #999999;
        list-style: none;
        display: inline-block;
        text-align: center;
        margin-right: 10px;
    }

    .active {
        background-color: red;
        color: #ffffff;
    }
</style>

<body>
    <div id="app">
        <p @click="gett">测试内容</p>
    </div>
    <script>
        Vue.component('first', {
            template: '<div class="div1 div2">div</div>'
        })
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    num: [1, 2, 3, 4, 5]
                }
            },
            methods: {
                gett:function(event){
                    console.log(event)
                }
            },
            computed: {
                eventnum: function () {
                    return this.num.filter(function (num) {
                        return num % 2 === 0
                    })
                },
                num2:function(){
                    return this.num.filter(function(val){
                        return val>2
                    })
                }
            }
        })
    </script>
</body>

</html>